<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button
            type="success"
            plain
            size="small"
            icon="fa fa-mail-forward"
            @click="returnList"
            >返回
          </el-button>
        </div>
        <el-row>
          <el-form-item label="批次码:">
            <span>{{ dataInfo.batchCode }}</span>
          </el-form-item>
          <el-form-item label="分账订单来源类型:">
            <div>
              {{
                dataInfo.splitType == 1
                  ? "自订单(包含充值订单):"
                  : "公司补贴订单:"
              }}
            </div>
          </el-form-item>
          <el-form-item label="支付金额(扣除手续费之前):">
            <span>{{ dataInfo.amount }}</span>
          </el-form-item>
          <el-form-item label="可分账金额(扣除手续费后):">
            <span>{{ dataInfo.balance }}</span>
          </el-form-item>
          <el-form-item label="已分账金额:">
            <span>{{ dataInfo.outBalance }}</span>
          </el-form-item>
          <el-form-item label="分账状态:">
            <el-tag
              effect="dark"
              size="mini"
              :type="formatSplitStates(dataInfo.splitState)"
            >
              {{ formatSplitState(dataInfo.splitState) }}
            </el-tag>
          </el-form-item>
        </el-row>
        <div class="tit">
            <h2>订单信息</h2>
        </div>
        <el-row>
          <el-table :data="orderList">
            <el-table-column
              type="index"
              width="100px"
              align="center"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="orderNo"
              label="订单编号"
              width="100px"
              align="center"
            >
            </el-table-column>
            <el-table-column align="center" width="100" label="订单类型">
              <template slot-scope="scope">
                <el-tag
                  size="mini"
                  effect="dark"
                  :type="formatOrderTypes(scope.row.orderType)"
                  >{{ formatOrderType(scope.row.orderType) }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="用户地址"
              width="140px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              align="center"
              width="80"
              label="购买总数"
              prop="nums"
            >
            </el-table-column>
            <el-table-column
              label="支付金额"
              width="80"
              prop="realAmount"
              align="center"
            >
            </el-table-column>
            <el-table-column label="支付方式" width="100" align="center">
              <template slot-scope="scope">
                <div>
                  {{ formatPayType(scope.row.payType) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="支付状态" align="center" width="100px">
              <template slot-scope="scope">
                <div>
                  <el-tag
                    size="mini"
                    effect="dark"
                    :type="formatPayStates(scope.row.payState)"
                  >
                    {{ formatPayState(scope.row.payState) }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" width="100px" align="center">
              <template slot-scope="scope">
                <div>
                  <el-tag
                    size="mini"
                    effect="dark"
                    :type="formatOrderStates(scope.row.orderState)"
                    style="border:none"
                  >
                    {{ formatOrderState(scope.row.orderState) }}
                  </el-tag>
                  <div style="color:red" v-if="scope.row.errorState">
                    <span v-if="scope.row.errorState === 1">超时未接单</span>
                    <span v-if="scope.row.errorState === 2">商户取消</span>
                    <span v-if="scope.row.errorState === 3">用户申请取消</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button  @click="handleClickDetail(scope.row)" size="mini">查看</el-button>
            </template>
          </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import OrderSplitAccountApi from "@/api/account/orderSplitAccount";
export default {
  data() {
    return {
      dataInfo: {},
      orderList: []
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      OrderSplitAccountApi.getOrderSplitAccount({
        id: this.$route.query.id
      }).then(res => {
        this.dataInfo = res.data;
        this.orderList = res.data.orderList
      });
    },
    handleClickDetail(row) {
      this.$router.push({
        path: "/order/orderDetail",
        query: { id: row.orderId }
      });
    },
    formatOrderType(cellValue) {
      if (cellValue === 1) {
        return "普通订单";
      } else if (cellValue === 3) {
        return "计时";
      } else if (cellValue === 8) {
        return "报警";
      } else if (cellValue === 9) {
        return "语音单";
      } else if (cellValue === 10) {
        return "补贴";
      } else if (cellValue === 11) {
        return "急救订单";
      }
    },
    formatOrderTypes(cellValue) {
      if (cellValue === 1) {
        return "";
      } else if (cellValue === 3) {
        return "warning";
      } else if (cellValue === 8) {
        return "danger";
      } else if (cellValue === 9) {
        return "success";
      } else if (cellValue === 11) {
        return "error";
      }
    },
    formatPayType(cellValue) {
      if (cellValue === 1) {
        return "余额";
      } else if (cellValue === 2) {
        return "微信支付";
      } else if (cellValue === 3) {
        return "货到付款";
      } else if (cellValue === 4) {
        return "他人代付";
      } else if (cellValue === 5) {
        return "0元购";
      }
    },
    formatSplitStates(val) {
      switch (val) {
        case 0:
          return "danger";
        case 1:
          return "primary";
        case 2:
          return "success";
      }
    },
    formatSplitState(val) {
      switch (val) {
        case 0:
          return "未分账";
        case 1:
          return "待分账";
        case 2:
          return "已分账";
      }
    },
    formatOrderState(cellValue) {
      if (cellValue === 1) {
        return "已接单待确认";
      } else if (cellValue === 5) {
        return "商户已确认";
      } else if (cellValue === 10) {
        return "服务员已确认";
      } else if (cellValue === 11) {
        return "已出发";
      } else if (cellValue === 12) {
        return "已到达";
      } else if (cellValue === 13) {
        return "已回收";
      } else if (cellValue === 15) {
        return "已取消";
      } else if (cellValue === 16) {
        return "取消失败";
      } else if (cellValue === 20) {
        return "已完成";
      }
    },

    formatOrderStates(cellValue) {
      if (cellValue === 1) {
        return "#F56C6C";
      } else if (cellValue === 5) {
        return "#67C23A";
      } else if (cellValue === 10) {
        return "#E3EA11";
      } else if (cellValue === 11) {
        return "#11C6EA";
      } else if (cellValue === 12) {
        return "#8B8D9D";
      } else if (cellValue === 15) {
        return "#909399";
      } else if (cellValue === 16) {
        return "#595E8C";
      } else if (cellValue === 20) {
        return "#409EFF";
      }
    },
    formatPayState(cellValue) {
      if (cellValue === 1) {
        return "未支付";
      } else if (cellValue === 4) {
        return "未支付差价";
      } else if (cellValue === 5) {
        return "已支付";
      } else if (cellValue === 10) {
        return "已取消";
      } else if (cellValue === 15) {
        return "已退款";
      } else if (cellValue === 20) {
        return "完成";
      }
    },
    formatPayStates(cellValue) {
      if (cellValue === 1) {
        return "danger";
      } else if (cellValue === 4) {
        return "danger";
      } else if (cellValue === 5) {
        return "success";
      } else if (cellValue === 10) {
        return "info";
      } else if (cellValue === 15) {
        return "warning";
      } else if (cellValue === 20) {
        return "";
      }
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/account/orderSplitAccountManagement" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
